<template>
  <div class="collection_right">
      <div class="right_search">
        <input type="text" class="form-control" placeholder="搜索" aria-describedby="basic-addon1">
      </div>
      <div class="cr_body">
        <!-- @mouseenter="menuMove" @mouseleave="menuLeave" -->
        <div class="cr_body_menus cr_body_menus-hover" ref="crMenuRef" >
          <TileMenuTest class="cr_body_menus_war" :style="{opacity: menuShow ? 1 : 0}" :menus="treeData" :checkKey="checkItem.key" @itemCheck="itemCheck"></TileMenuTest>
        </div>
        <div class="collection_right_wrapper">
          <!-- <span v-for="(item, index) in itemsObj[checkItem.id]" :key="index">{{item.title}}</span> -->
          <div class="collection_right_back">
            <arrow-left-outlined @click="goBlack" v-if="checkItem.key.split('-').length > 1" />
          </div>
          <div class="collection_right_tgs">
            <TagBlocks v-show="!isDraw" @floderClick="floderClick" :items="itemsObj[checkItem.id]"></TagBlocks>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import useThemeConfig from '@/hooks/useThemeConfig'

import useInterAction from './hook/useInterAction'
import useTagData from './hook/useTag'

import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import TileMenuTest from './TileMenu/index.vue'
import TagBlocks from './Blocks/indexs.vue'


// 目录拉伸交互部分逻辑
const crMenuRef = ref()
const { 
  menuShow,
  isDraw,
  menusWidth
 } = useInterAction(crMenuRef)

// 处理书签栏数据，业务逻辑
const {
  init, // 初始化数据
  treeData, // 书签目录数据
  itemsObj, // 书签栏集合数据
  checkItem, // 当前选中的目录
} = useTagData()
init()


// 点击文件夹，进入下一级
function floderClick(val:any){
  itemCheck(val)
}

// 回退，返回上一级
function goBlack(){
  if(checkItem.key.split('-').length < 2) return
  const newKey = checkItem.key.substring(0, checkItem.key.lastIndexOf('-'))
  let findItem = null
  let stack = [...treeData.value]
  while(stack.length){
    const obj = stack.pop()
    if(obj.key === newKey){
      findItem = obj
      stack = []
    }else {
      stack.push(...obj.children)
    }
  }
  itemCheck(findItem)
}

// 切换目录选中状态
function itemCheck(item: any){
  checkItem.key = item.key
  checkItem.id = item.id
}


const {
  theme
}= useThemeConfig()
</script>
<style lang="less">
// 右侧收藏仓库
  .collection_right{
    height: 100%;
    border-radius: 13px;
    padding: 5px;
    display: flex;
    flex-flow: column;
    .bgAndShadow();
    // background: v-bind('theme.blurColor');
    // box-shadow: 5px 5px 15px 4px rgba(0,0,0,.2);
    .right_search{
      color: black;
      margin-bottom: 20px;
      height: 30px;
      input{
        transition: width .2s;
        width: 30%;
        min-width: 300px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        border-radius: 5px;
        padding-left: 10px;
        border-color: transparent;
        &:focus{
          width: 95%;
        }
      }
    }
    .cr_body{
      // flex: auto;
      height: calc(100vh - 225px);
      display: flex;
      flex-flow: row;
      .cr_body_menus{
        height: 100%;
        transition: width .2s;
        white-space: pre;
        padding-right: 20px;
        overflow-x: hidden;
        overflow-y:  auto;
        width: v-bind('menusWidth+"px"');
        .cr_body_menus_war{
          transition: opacity .5s;
        }
      }
      .collection_right_wrapper{
        // flex: auto;
        transition: width .2s;
        width: v-bind('"calc(100% - " + menusWidth + "px)"');
        height: 100%;
        // width: 100%;
        color: v-bind('theme.fontColor');
        .collection_right_back{
          height: 40px;
          font-size: 20px;
          color: v-bind('theme.fontColor');
          .anticon{
            cursor: pointer;
            &:hover{
              color: v-bind('theme.fontCheckColor');
            }
          }
        }
        .collection_right_tgs{
          background: v-bind('theme.blurColor'); // rgba(0,0,0,.1);
          height: calc(100% - 40px);
          overflow-y: auto;
          border-radius: 0px 5px 5px 0px;
        }
      }
    }
  }
</style>